<template>
    <div v-show="isPwd">
        <el-form ref="userRefPwd" :model="state.pwd" :rules="rulesPwd" label-width="80px">
            <el-form-item label="旧密码" prop="password">
                <el-input type="password" v-model="state.pwd.password" placeholder="请输入原密码" clearable style="width: 350px;"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="state.pwd.newPassword" placeholder="请输入新密码" clearable style="width: 350px;"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" v-model="state.pwd.confirmPassword" placeholder="请输入确认密码" clearable style="width: 350px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="update">保存修改</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div v-show="!isPwd">
        <el-form ref="userRefAcc" :model="state.user" :rules="rulesAcc" label-width="80px">
            <el-form-item label="账号" prop="username">
                <el-input v-model="state.user.username" placeholder="请输账号" clearable style="width: 350px;"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="state.user.password" placeholder="请输入密码" clearable style="width: 350px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存账号</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import {defineProps, reactive, ref, computed} from "vue";
import {errorMsg, infoMsg, successMsg} from "../../../utils/message";
import {saveAccount, updatePwd} from "../../../api/user/sysUser";
import {resetForm} from "../../../utils/common";

const userRefPwd = ref()
const userRefAcc = ref()
//  接收父组件传递的值
const props = defineProps({
    username: String
});

const isPwd = computed(() =>{
    return props.username ? true : false
})

const state = reactive({
    pwd: {
        password: '',
        newPassword: '',
        confirmPassword: ''
    },
    user: {
        username: '',
        password: '',
    }
})

//  校验
const rulesPwd = reactive({
    password: [{required: true, message: '请输入旧密码', trigger: 'blur'}],
    newPassword: [{required: true, message: '请输入新密码', trigger: 'blur'}],
    confirmPassword: [{required: true, message: '请输入确认密码', trigger: 'blur'}]
})

const rulesAcc = reactive({
    password: [{required: true, message: '请输入旧密码', trigger: 'blur'}],
    username: [{required: true, message: '请输入账号', trigger: 'blur'}]
})

//  修改密码
const update = () => {
    userRefPwd.value.validate((valid) => {
        if (valid) {
            if(state.pwd.newPassword !== state.pwd.confirmPassword){
                errorMsg('两次输入密码不一致')
                return
            }
            updatePwd(state.pwd).then(res => {
                if (res.code == 200){
                    successMsg(res.message)
                    //  重置清空
                    resetForm(userRefPwd.value)
                } else {
                    errorMsg(res.message)
                }
            })
        }
    });
}

//  保存账号密码
const save = () => {
    userRefAcc.value.validate((valid) => {
        if (valid) {
            saveAccount({username: state.user.username, password: state.user.password}).then(res => {
                if (res.code == 200){
                    successMsg(res.message)
                    //  重置清空
                    resetForm(userRefAcc.value)
                    isPwd.value = true
                } else {
                    errorMsg(res.message)
                }
            })
        }
    });
}
</script>

<style scoped>

</style>